<template>
    <view class="user-info flex px-[50rpx] justify-between py-[50rpx]">
        <view
            v-if="isLogin"
            class="flex items-center"
            @click="navigateTo('/pages/user_data/user_data')"
        >
            <u-avatar :src="user.avatar" :size="120"></u-avatar>
            <view class="text-white ml-[30rpx] mb-[45rpx]">
                <view class="user_name">{{ user.nickname }}</view>
				<view class="user_mobile mt-[14rpx]">{{ user.mobile }}</view>
            </view>
        </view>
        <navigator v-else class="flex items-center" hover-class="none" url="/pages/login/login">
            <u-avatar src="/static/images/user/default_avatar.png" :size="120"></u-avatar>
            <view class="text-white text-3xl ml-[20rpx]">未登录</view>
        </navigator>
<!--        <navigator v-if="isLogin" hover-class="none" url="/pages/user_set/user_set" class="mt-4">
            <u-icon name="setting" color="#fff" :size="48"></u-icon>
        </navigator> -->
    </view>
</template>
<script lang="ts" setup>
const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    },
    user: {
        type: Object,
        default: () => ({})
    },
    isLogin: {
        type: Boolean
    }
})
const navigateTo = (url: string) => {
    uni.navigateTo({
        url
    })
}
</script>

<style lang="scss" scoped>
.user-info {
    // height: 180rpx;
    padding: 50rpx 20rpx 0rpx;
    background-position: bottom;
    background-size: 100% auto;
}

.user_name {
	width: 308rpx;
	height: 34rpx;
	font-family: SourceHanSansCN, SourceHanSansCN;
	font-weight: 500;
	font-size: 36rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.user_mobile {
	width: 206rpx;
	height: 19rpx;
	font-family: SourceHanSansCN, SourceHanSansCN;
	font-weight: 400;
	font-size: 26rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
</style>
